<template>
  <div>
    <el-table :data="dataSource.data" style="width: 100%">
      <el-table-column
        :width="column.width"
        :prop="column.dataIndex"
        :label="column.label"
        v-for="column in columns"
        :key="column.dataIndex"
      >
        <template #default="scope">
          <template v-if="column.render">
            <MyRender :row="scope.row" :render="column.render"></MyRender>
          </template>
          <template v-else>
            <span>{{ scope.row[column.dataIndex] }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { AxiosRequestConfig } from "axios/index";
import service from "@/utils/request";
// type IProps = {
//   fetchConfig: IFetchConfig; // 数据请求配置
//   columns?: any[];
//   options?: typeof _Table;
// };
const MyRender = defineComponent({
  props: {
    row: Object,
    render: Function,
  },
  render(props: any) {
    return props.render(props.row);
  },
});

export default defineComponent({
  name: "MyTable",
  props: {
    fetchConfig: Object,
    columns: Array,
    options: Object,
  },
  components: {
    MyRender,
  },
  setup(props) {
    let dataSource = reactive<any>({
      data: [],
    });

    const current = ref<number>(0);
    const pageSize = ref<number>(10);
    const fetch = async () => {
      if (props.fetchConfig) {
        const { url, method, params, shouldPagination } = props.fetchConfig;
        const requestMethod = method ?? "get";
        const requestParams = shouldPagination
          ? {
              ...params,
              page: current,
              size: pageSize,
            }
          : { ...params };
        const requestConfig: AxiosRequestConfig = {
          url,
          method: requestMethod,
          params: requestParams,
          data: requestParams,
        };
        const res = await service.request(requestConfig);
        dataSource.data = res.data.data;
      }
    };
    return { dataSource, fetch };
  },
});
</script>
<style lang="scss" scoped></style>
